<template>
  <div class="two">
    <div class="movieT" v-html="bestgood"></div>
    <div id="movieD">
      <router-link  v-for="myitem in listdata" :key="myitem.id" :to="'/item/' + myitem.id">
        <div class="movieDS" >
          <div class="movieDSL">
            <img :src="myitem.img" />
          </div>
          <div class="movieDSM">
            <span>
              {{ myitem.nm }}
              <span v-if="myitem.version == 'v2d imax'"> v2d imax</span>
            </span>
            <span>观众评{{ myitem.sc }}</span>
            <span class="star">主演{{ myitem.star }}</span>
            <span>{{ myitem.showInfo }}</span>
          </div>
          <div :class="{ movieDSR: 'true', bluepre: myitem.preShow }">
            <span>
              <span v-if="myitem.preShow === false">购票</span>
              <span v-else>预购</span>
            </span>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "myBody",
  data() {
    return {
      listdata: [],
      bestgood: "",
    };
  },
  mounted() {
    axios({
      method: "get",
      url: "/ajax/movieOnInfoList?token=&optimus_uuid=91EF29D0D7D811EB8CF6A1D4671CD056A65811B291BC465A975913C18F908A7E&optimus_risk_level=71&optimus_code=10",
    }).then((res) => {
      this.listdata = res.data.movieList;
      this.listdata.forEach((item) => {
        item.img = item.img.replace("w.h", "64.90");
      });
    });
    axios({
      method: "get",
      url: "/ajax/topRatedMovies?token=&optimus_uuid=204ED260C84411EB8D07E93F9B3EFA4AC96D3D914ADF4191B62C597788A34648&optimus_risk_level=71&optimus_code=10",
    }).then((res) => {
      this.bestgood = res["data"];
    });
  }
};
</script>

<style scoped>
@import url("/s0.meituan.net.css");

.movieT {
  overflow: scroll;
}

.movieTImg {
  width: 9.84rem;
  height: 4rem;
  overflow-y: hidden;
  overflow-x: scroll;
}

.img {
  display: flex;
  width: 21.333333rem;
  justify-content: space-around;
  height: 3.76rem;
}

::-webkit-scrollbar {
  display: none;
}

.img img {
  width: 2.266667rem;
  height: 3.066667rem;
}

.img > div {
  position: relative;
}

.img span {
  position: absolute;
  font-size: 12px;
  transform: scale(0.91);
  color: #faaf00;
  bottom: 0.666667rem;
  left: -0.106667rem;
}

.img > div div {
  position: absolute;
  font-size: 13px;
  bottom: 0.266667rem;
}

#movieD {
  background-color: white;
  height: 100%;
}

.movieDS {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;
}

.movieDSL {
  width: 64px;
  height: 90px;
  flex: 0 1 15%;
}

.movieDSL img {
  width: 64px;
  height: 90px;
}

.movieDSM {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  flex: 0 1 60%;
}

.movieDSM span {
  width: 220px;
}

.movieDSR {
  width: 47px;
  height: 27px;
  background-color: #f03d37;
  border-radius: 20px;
  display: flex;
  flex: 0 1 15%;
  justify-content: center;
  align-items: center;
}

.movieDSR span {
  display: inline-block;
  font-size: 14px;
  color: white;
  text-align: center;
}

.star {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bluepre {
  background-color: blue;
}
</style>